<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue';

	import {
		ElMessage,
		ElMessageBox,
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';

	import {
		useConfigStore
	} from '@/stores'

	// 参数接收
	const props = defineProps({
		msg: {
			type: String,
			default: 'msg',
		},
	})
	const modelType = defineModel('type');

	// 参数
	const pages = reactive({

		checked: false,

		sfType: [{
				deptName: '学生',
				deptId: 1,
			},
			{
				deptName: '老师',
				deptId: 2,
			}
		],

		schoolDept: [],
		xyDept: [],

		zyType: useConfigStore().config.zy_type,

		formData: {
			sfType: '',
			userName: '',
			password: '',
			schoolId: '',
			deptId: '',
			zyType: '',
			phonenumber: '',
			nickName: '',
			studyNo: '',
		},

		rules: {

			sfType: [{
				required: true,
				message: '请选择身份',
				trigger: 'blur'
			}],
			userName: [{
				required: true,
				message: '请输入账号',
				trigger: 'blur'
			}],
			password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			}],
			schoolId: [{
				required: true,
				message: '请选择学校',
				trigger: 'blur'
			}],
			deptId: [{
				required: true,
				message: '请选择院系',
				trigger: 'blur'
			}],
			zyType: [{
				required: true,
				message: '请选择专业',
				trigger: 'blur'
			}],
			nickName: [{
				required: true,
				message: '请选择姓名',
				trigger: 'blur'
			}],
			phonenumber: [{
				required: true,
				message: '请输入手机号码',
				trigger: 'blur'
			}],
			// studyNo: [{
			// 	required: true,
			// 	message: '请输入学号',
			// 	trigger: 'blur'
			// }],
		},
	})
	const formRef = ref();
	const visible = ref(false);
	const visibleText = ref('');
	const visibleTitle = ref('');

	// 身份
	watch(() => pages.formData.sfType, (n) => {
		if (n == 1) {
			pages.rules.studyNo = [{
				required: true,
				message: '请输入学号',
				trigger: 'blur'
			}];
		} else {
			delete pages.rules.studyNo;
		}
	})

	// 学校发生变化
	watch(() => pages.formData.schoolId, async (parentId) => {

		// 清空系
		if (!parentId) {
			pages.xyDept = [];
			pages.formData.deptId = '';
			return
		};

		// 获取系
		pages.xyDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId, // 父级Id
		})
	})

	// 挂载
	onMounted(() => {
		init();
	})

	// 初始化
	async function init() {
		util.showLoading();

		// 学校
		pages.schoolDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId: "", // 父级Id
			deptId: 100, // 100 是学校
		})

		pages.formData.schoolId = pages.schoolDept[0].deptId; // 默认选中学校

		util.hideLoading();
	}

	// 协议
	async function changeOpen(type) {
		const res = await api.user.twxxlist(type);
		visibleTitle.value = (type == 1) ? '注册协议' : '隐私政策';
		visibleText.value = res[0].content;
		visible.value = true;
	}

	// 注册
	function changeSave() {

		if (!pages.checked) return ElMessage({
			message: '请查看《注册协议》和《隐私政策》',
			type: 'warning',
		});

		// 拦截验证
		formRef.value.validate(async valid => {
			if (!valid) return;

			const res = await api.user.register(pages.formData);
			if (!res) return;

			ElMessageBox.alert('提交注册审核成功！', '系统通知', {
				// autofocus: false,
				confirmButtonText: '我知道了',
				callback: (action) => {
					console.log(action);
				},
			})
			
			modelType.value = 1;
			// emit('save', pages.formData)
		})
	}

	// 暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['change', 'save'])
</script>


<template>

	<div class="HomeView-form">

		<div style="width: 100%;">
			<p class="title">注册</p>
			<p class="biao"></p>
		</div>

		<!--  -->
		<el-form ref="formRef" :model="pages.formData" :rules="pages.rules" style="width: 100%;margin-top: 30px;"
			label-position="top">

			<!-- 选择身份： -->
			<el-form-item label="选择身份：" prop="sfType">
				<el-select v-model="pages.formData.sfType" placeholder="请选择身份" clearable :style="{width: '100%'}">
					<el-option v-for="item in pages.sfType" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item>

			<!-- 账号： -->
			<el-form-item label="账号：" prop="userName">
				<el-input type="text" maxlength="11" v-model="pages.formData.userName" placeholder="请输入账号" clearable
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 密码： -->
			<el-form-item label="密码：" prop="password">
				<el-input show-password type="text" v-model="pages.formData.password" placeholder="请输入密码" clearable
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 选择学校： -->
			<!-- <el-form-item label="选择学校：" prop="schoolId">
				<el-select v-model="pages.formData.schoolId" placeholder="请选择学校" clearable :style="{width: '100%'}">
					<el-option v-for="item in pages.schoolDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item> -->

			<!-- 院系： -->
			<el-form-item label="院系：" prop="deptId">
				<el-select v-model="pages.formData.deptId" placeholder="请选择院系" clearable :style="{width: '100%'}">
					<el-option v-for="item in pages.xyDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item>

			<!-- 专业： -->
			<el-form-item label="专业：" prop="zyType">
				<el-select v-model="pages.formData.zyType" placeholder="请选择专业" clearable :style="{width: '100%'}">
					<el-option v-for="item in pages.zyType" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>

			<!-- 姓名 -->
			<el-form-item label="姓名：" prop="nickName">
				<el-input type="text" v-model="pages.formData.nickName" placeholder="请输入姓名" clearable
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 手机号码： -->
			<el-form-item label="手机号码：" prop="phonenumber">
				<el-input type="text" maxlength="11" v-model="pages.formData.phonenumber" placeholder="请输入手机号码"
					clearable :style="{width: '100%'}" />
			</el-form-item>

			<!-- 学号： -->
			<el-form-item label="学号：" prop="studyNo" v-if="pages.formData.sfType == 1">
				<el-input type="text" v-model="pages.formData.studyNo" placeholder="请输入学号" clearable
					:style="{width: '100%'}" />
			</el-form-item>

		</el-form>

		<!-- 注册 -->
		<l-button value="注册" @change="changeSave" />

		<!-- / 注册 -->
		<el-link style="margin-top: 10px;" @click="modelType = 1">去登录</el-link>

		<!-- xieyi -->
		<p class="xieyi">
			<el-checkbox v-model="pages.checked">同意<text @click.stop="changeOpen(1)">《注册协议》</text>和<text
					@click.stop="changeOpen(2)">《隐私政策》</text></el-checkbox>
		</p>

	</div>

	<!-- 对话框 -->
	<el-dialog v-model="visible" :show-close="false" width="500">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass" style="font-weight: bold;">{{visibleTitle}}</h4>
				<el-button type="danger" @click="close">
					<el-icon>
						<CircleCloseFilled />
					</el-icon>
				</el-button>
			</div>
		</template>
		<div style="padding: 30px;" v-html="visibleText"></div>
	</el-dialog>

</template>


<style lang="scss">
	.HomeView-form {
		.el-form-item__label {
			font-size: 14px;
			color: #999999;
		}
	}
</style>
<style lang="scss" scoped>
	.HomeView-form {
		max-height: 80vh;
		overflow: scroll;

		margin-left: 126px;
		margin-right: 75px;
		padding: 20px 70px 20px 70px;
		background: #FFFFFF;
		border-radius: 5px;

		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-weight: bold;
			font-size: 28px;
			color: #333333;
		}

		.biao {
			margin-top: 10px;
			width: 60px;
			height: 4px;
			background: #5775EF;
			border-radius: 6px 6px 6px 6px;
		}

		.l-button {
			margin-top: 10px;
			width: 100%;
		}

		.xieyi {
			margin-top: 10px;
			font-size: 16px;
			color: #333333;

			text {
				color: #5775EF;
				cursor: pointer;
			}
		}
	}

	.my-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>